<template>
  <div class="page-container">
    <div style="align:right;padding:20px">
      <el-button type="primary" @click="dialogVisible=true">新增</el-button>
    </div>
    <el-table :data="categoryList" :size="size" align="align" style="width: 100%" :min-height="350" :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
      <el-table-column label="id" min-width="120" v-show="false" sortable prop="id"></el-table-column>
      <el-table-column label="一级分类名称" min-width="120" sortable prop="name"></el-table-column>
      <el-table-column label="二级分类数量" min-width="120" sortable prop="levelTwoName" ></el-table-column>
      <el-table-column label="排序" prop="sort" min-width="120" sortable></el-table-column>
      <el-table-column label="操作" min-width="180" sortable fixed="right">
        <template slot-scope="scope">
          <kt-button :label="'编辑'" :size="size" type="primary" @click="edit(scope.row)"/>
          <kt-button :label="'删除'" :size="size" type="primary" @click="deleteArticle()"/>
          <kt-button :label="'新增下级分页'" @click="showTransition(scope.row)" :size="size" type="primary"/>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <!--                     @current-change="refreshPageRequest"-->
    <!--                     @size-change="handleSizeChange"-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize"
                     :total="totalSize"
                     style="float:right;"
                     :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
    <el-dialog title="添加一级分类" :model="firstLevel" :visible.sync="dialogVisible" width="300px"
               :before-close="handleClose">
      <el-form>
        <el-form-item label="一级分类名称：">
          <el-input v-model="firstLevel.name" v-checked="{required:true}"></el-input>
        </el-form-item>

        <el-form-item label="排序:">
          <el-select v-model="firstLevel.sort" v-checked="{required:true}">
            <el-option label="1" value="1">
            </el-option>
            <el-option label="2" value="2">
            </el-option>
            <el-option label="3" value="3">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="addOne">保存</el-button>
        <el-button type="primary" @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加二级分类" :visible.sync="twoDialogVisible" width="400px" :before-close="handleClose">
      <el-form :inline="true" :model="levelTwo" ref="levelTwo" rules="levelTwoRules" label-position="right" label-width="200px">
        <el-form-item label="一级分类名称：">
          <el-input v-model="levelTwo.name" disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="一级分类名称：">
          <el-input v-model="levelTwo.id" reqeired="true" trigger="blur" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="添加二级分类名称">
          <el-button type="primary" @click="addLevelTwo">添加</el-button>
        </el-form-item>
        <el-form-item v-for="(item,index) in vShow" :key="index">
          <el-input v-model="item.name" style="width:250px" maxlength="10"></el-input>
          <el-button type="primary" @click="vShow.splice(index,1)">删除</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="showMatch()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  //一.导包区
  import KtButton from "@/views/Core/KtButton";
  //二.数据输出区
  export default {

    //===== 注册组件 =====
    components: {
      KtButton,
    },

    //===== 数据初始化区=====
    data() {
      return {
        twoDialogVisible:false,
        dialogVisible: false,
        //===== 公共数据初始化 =====
        pageIndex: 0, //当前页数：首页；
        pageSize: 10, //每页记录数：10条记录；
        totalSize: 0,
        pageRequest: {pageNum: 1, pageSize: 10},
        // tableList: [], // 表格列表数据
        searchSize: 'mini',
        vShow:[],
        categoryList: [],
        firstLevel: {
          name: "",
          sort: "",
        },
        levelTwo: [],
      }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
      this.findPage();
    },

    //=====Vue.js 方法区=====
    methods: {

      // 获取分页数据
      findPage: function (data) {
        let this_ = this;
        this.utils.request.findSysCategoryPage(this_.pageRequest, function (res) {
          if (res.code == '0000') {
            this_.categoryList = res.data.list;
            this_.totalSize = Number(res.data.total);
          }
        });
      },
      //二级分类 限制五个
      addLevelTwo() {
        if (this.vShow.length < 5) {
          this.vShow.push({});
        }
      },
      //新增二级分类
      showMatch() {
        let this_= this;
            debugger

        var  param={};
        //     param.name='';
        // var param={}
        // param.name=this_.categoryList;
        param.vshow=this_.vShow;
        param.category=this_.levelTwo;
        // let vShow=this_.vShow;
            this.utils.request.saveSysCategoryLevelTwo(param, function (res) {
              if (res.code == "0000") {
                this_.$message({message: '保存成功', type: 'success'});
                this_.findPage();
              } else {
                this_.$message({message: '保存失败', type: 'warning'});
              }
              this_.twoDialogVisible = false;
            });
      },
      //新增下级按钮
      showTransition(param) {
        let this_=this;
        this_.twoDialogVisible = true;
        this_.levelTwo=param;
        this_.vShow = [];
      },
      //关闭弹窗
      handleClose() {
        this.dialogVisible = false;
        this.twoDialogVisible = false;
        this.firstLevel={};

      },
      //编辑按钮
      edit(param) {
        let this_ = this;
        this_.dialogVisible = true;
        this_.firstLevel.name = param.name;
        this_.firstLevel.sort=param.sort;
      },
      //删除
      deleteArticle() {
        let this_ = this;
        this.utils.request.deleteSysCategory(this_.categoryList[0], res => {
          if (res.code == "0000") {
            this_.$message({message: '删除成功', type: 'success'});
            this_.findPage();
          } else {
            this_.$message({message: '删除失败', type: 'warning'});
          }
        });
      },

      //新增一级分类
      addOne() {
        let this_ = this;
        debugger
        this_.utils.request.saveSysCategory(this_.firstLevel, function (data) {
          if (data.code === "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
          } else {
            this_.$message({
              message: "操作失败 " + data.msg,
              type: "error"
            });
          }
          this_.firstLevel = {};
          this_.dialogVisible = false;
          this_.findPage();
        });
      },
      // resetForm(formName) {
      //   if (this.$refs[formName] != undefined) {
      //     this.$refs[formName].resetFields();
      //     this.findPage(null);
      //   }
      // }
    },
    // 每页数据刷新
    refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findPage();
    },
    // 每页条数刷新
    handleSizeChange: function (pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },

  }
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
